<template>
        <div class="Bread">
                <el-breadcrumb separator="/">
                        <el-breadcrumb-item>组织管理</el-breadcrumb-item>
                        <el-breadcrumb-item>用户管理</el-breadcrumb-item>
                </el-breadcrumb>
        </div>
        <div class="SearchBox">
                <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="2%" class="demo-ruleForm">
                        <el-form-item prop="SearchData">
                                <el-input class="SearchDataBox" placeholder="请输入用户名或手机号" v-model="ruleForm.SearchData" />
                        </el-form-item>
                </el-form>
                <div>
                        <el-button type="primary" @click="submitForm">
                                搜索
                        </el-button>
                        <el-button type="round" @click="resetForm">
                                重置
                        </el-button>
                </div>
        </div>

        <el-table :data="data" class="DataBox" :header-cell-style="{background:'#F5F5F5'}" :row-style="{height:80+'px'}">
                <el-table-column prop="name" label="用户名"/>
                <el-table-column prop="nickname" label="昵称" />
                <el-table-column prop="phone" label="手机号" />
                <el-table-column prop=[roles[0].roleName] label="角色" />
                <el-table-column prop="isDisabled" label="状态">
                        <!-- <template slot-scope="scope" v-for="item in Newdata">
                                {{ item }}
                        </template> -->
                </el-table-column>
                <el-table-column label="操作" width="400px">
                        <template #default="scoped">
                                <el-button type="primary">
                                停用
                                </el-button>
                                <el-popconfirm @confirm="handleClick(scoped.row)" title="您确定要删除吗?">
                                        <template #reference>
                                                <el-button type="danger">删除</el-button>
                                        </template>
                                </el-popconfirm>
                                <el-button type="primary">
                                编辑
                                </el-button>
                                <el-button type="primary">
                                重置密码
                                </el-button>
                        </template>
                </el-table-column>
        </el-table>
        <el-pagination layout="prev, pager, next" @current-change="currentChange" :total="state.totalCount" />
</template>
    
<script setup lang='ts'>
import { reactive, ref, onMounted } from 'vue'
// import { ElMessage } from 'element-plus';
import type { FormInstance, FormRules } from 'element-plus';
import { useRouter } from 'vue-router';

const router = useRouter();
//获取el-form的实例对象
const ruleFormRef = ref<FormInstance>()
//表单值
const ruleForm = reactive({
        SearchData: '',
})

const rules = reactive<FormRules>({
        SearchData: { required: true, message: '请输入用户名或手机号' }
})

function submitForm() {
        console.log(ruleForm);
}
function resetForm() {
        ruleForm.SearchData = ""
}

const state = reactive({
        totalCount: 0,
})

let Newdata:Array<String>=[]

interface DataType {
        name: string;//用户名
        nickname: string;//昵称
        phone: string;//电话号码
        roles: { roleName: string }[];//角色
        isDisabled: boolean;//是否禁用
}
onMounted(()=>{
        //发送接口，初始化数据
        const newdata = data.map(item=>{
                if(item.isDisabled == false){
                        return "正常"
                }else{
                        return "已禁用"
                }
        })
        Newdata = newdata
})
//模拟的假数据
const data: DataType[] = [
        {
                name: 'John Brown',
                nickname: "小明",
                phone: '15882246864',
                roles: [{ roleName: "老师" }],
                isDisabled: false,
        },
        {
                name: 'Jim Green',
                nickname: "小明",
                phone: '15882246864',
                roles: [{ roleName: "老师" }],
                isDisabled: false,
        },
        {
                name: 'Joe Black',
                nickname: "小明",
                phone: '15882246864',
                roles: [{ roleName: "学生" }],
                isDisabled: true,
        },
];
//分页参数
const params = {
        pageNumber: 1,
        pageSize: 5
}
const handleClick = (scoped:any) => {
        console.log('click',scoped)
}
//切换分页
function currentChange(pageNumber: number) {
        console.log("pageNumber", pageNumber)
        params.pageNumber = pageNumber
}
</script>
    
<style lang="less" scoped>
.Bread {
        width: 100%;
        height: 5%;
        background-color: #F5F5F5;
        box-sizing: border-box;
}

.SearchBox {
        padding-top: 2%;
        display: flex;
}

.demo-ruleForm {
        width: 20%;
        z-index: 1;
        margin-left: 2%;
        margin-right: 2%;
        margin-top:none !important
}
.DataBox{
        display: flex;
        margin-top: 2%;
        margin-left: 2%;
        width: 95%;
}
::v-deep .el-table__header-wrapper {
  thead {
    th{
      div{
        font-weight: 500;
        font-size: 20px;
        color: black;
      }
    }
  }
}
</style>